<template>
  <div>
    <h1 class="test">{{str + '-'+ count}}</h1>
    <button @click="mdst">mdstr</button>
    <button @click="asyncAdd">async add</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  // computed: mapState({
  //   count(state) {
  //     return state.count;
  //   },
  //   str: "str"
  // })
  computed: {
    ...mapState(["count", "str"])
  },
  methods: {
    ...mapMutations(["add"]),
    ...mapActions(["addData"]),
    mdst() {
      this.$store.commit("rev", { next: "next-str" });
      this.add();
      console.log("同步：", this.$store.state.count);
    },
    asyncAdd() {
      // this.$store.dispatch("addData", 100);
      this.addData(1);
    }
  }
};
</script>

<style lang="less" scoped>
@col: red;
.test {
  color: @col;
}
</style>
